<template>
  <div>
    <el-button @click="send" type="primary">按钮</el-button>
    <el-input v-model="viewdata.echo"></el-input>
    <ElButton type="success" @click="viewdata.visible = true">弹出自定义对话框</ElButton>
  </div>

  <div>
    {{ viewdata.title }}
  </div>
  <div>
    {{ viewdata.page }}
    <input type="text" v-model="viewdata.page.pageNumber" />
    <input type="text" v-model="viewdata.page.pageSize" />
  </div>

  <div>
    {{ viewdata.result }}
  </div>

  <hr />
  <input type="text" v-model="viewdata.echo" />
  <button @click="send">发送</button>

  <!-- 弹出层对话框 -->
  <ElDialog v-model="viewdata.visible" title="黑暗骑士的网站"
    :close-on-click-modal="false">
    <div>对话框主体</div>
    <template #footer>
      <ElButton type="primary" @click="viewdata.visible = false">关闭</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { PageInfo, BaseResult } from '../ts/BaseResult'
import ApiService from '../ts/ApiService'
import { ElMessageBox, ElDialog, ElButton, ElInput } from 'element-plus'

const viewdata = reactive({
  title: '测试页面',
  page: new PageInfo(),
  result: new BaseResult(),
  echo: '',
  visible: false,
})

viewdata.result.message = '测试message'

function send() {
  ApiService.get(
    '/',
    {
      echo: viewdata.echo,
    },
    (data: BaseResult) => {
      ElMessageBox.alert(data.message, '黑暗骑士的网站')
    },
  )
}
</script>
<style></style>
